<template>
    <div align="center">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="角色名称">
                <el-input v-model="formInline.nameZh" placeholder="角色名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="success" plain @click="toAdd">新增</el-button>
                <el-button type="warning" plain @click="delBeach">批量删除</el-button>
            </el-form-item>
            <!--            <div>
                            <el-link type="primary" href="http://localhost:8081/role/addRole">新增</el-link>
                        </div>-->
        </el-form>

        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="getIds">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="角色拼写"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="nameZh"
                    label="角色名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="created"
                    label="创建日期"
                    width="200">
            </el-table-column>

            <el-table-column
                    prop="img"
                    label="图片"
                    width="100">
                <template slot-scope="scope">
                    <img :src="scope.row.img" width="50px;">
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="200">
                <el-row slot-scope="scope">
                    <el-button type="warning" plain @click="toUpdate(scope.row)">修改</el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click="delRole(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-s-tools" circle @click="toSetMenu(scope.row)">设置菜单</el-button>
                </el-row>
            </el-table-column>

        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="formInline.pageNum"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="formInline.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="formInline.total">
            </el-pagination>
        </div>
        <!--添加的对话框-->
        <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="角色拼写" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form.nameZh" autocomplete="off"></el-input>
                </el-form-item>
                <!--                    <div class="block">
                                        <span class="demonstration">创建时间</span>
                                        <el-date-picker
                                                v-model="form.created"
                                                type="date"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </div>-->
                <!--用户头像上传-->
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8081/user/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                    <img v-if="form.img" :src="form.img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRole">确 定</el-button>
            </div>
        </el-dialog>
        <!--设置菜单的对话框-->
        <el-dialog title="设置菜单" :visible.sync="dialogTableVisible">
            <el-tree
                    ref="tree"
                    :data="treeData"
                    show-checkbox
                    node-key="id"
                    :default-expanded-keys="[2,3]"
                    :default-checked-keys="Nodes"
                    :props="defaultProps">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="setMenu">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                multipleSelection: [],
                formInline: {
                    pageNum: 1,
                    pageSize: 3,
                    total: 0,
                },
                gridData: [],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    id: 0,
                    name: '',
                    nameZh: '',
                    created: '',
                    img: '',
                },
                formLabelWidth: '120px',
                treeData: [],
                Nodes:[],//被选中的树节点
                defaultProps: {//此处是实体类和json的字段名不一致的时候,可以在前端这里指定
                    children: 'children',
                    label: 'label'
                },
                menuRole:{
                    rid:0,
                    mids:[],
                }

            }
        },
        methods: {
            list() {
                this.axios.get("http://localhost:8081/role/getRoles", {params: this.formInline}).then(res => {
                    console.log(res.data.data);
                    this.tableData = res.data.data.list;
                    this.formInline.total = res.data.data.total;

                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.formInline.pageSize = val;
                this.list();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.formInline.pageNum = val;
                this.list();
            },
            onSubmit() {
                this.list();
            },
            /*去添加界面*/
            toAdd() {
                //打开对话框
                this.dialogFormVisible = true;
            },
            /*上传头像*/
            handleAvatarSuccess(resp, file) {
                this.form.img = resp.fileUrl;
            },
            /*设置头像的格式和信息*/
            /*beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },*/
            /*添加界面*/
            addRole() {
                this.axios.post("http://localhost:8081/role/addRole", this.form).then(resp => {
                    console.log(resp);
                    if (resp.data.result) {
                        this.$message("添加成功");
                        this.list();
                    } else {
                        this.$message("添加失败");
                    }
                })
                this.form = {};
                this.dialogFormVisible = false;
            },
            /*获取批量删除需要的ids*/
            getIds(val) {
                var id = val.map(val => val.id);
                console.log(id);
                this.ids = id;
            },
            delBeach() {
                console.log("==========" + this.ids);
                if (confirm("确定要删除吗?")) {
                    this.axios.post("http://localhost:8081/role/delBeach", {ids: this.ids}).then(resp => {
                        console.log(resp);
                        if (resp.data.result) {
                            this.$message("批量删除成功");
                            this.list();
                            this.ids = {};
                        } else {
                            this.$message("批量删除失败");
                        }
                    })
                }

            },
            delRole(row) {
                if (confirm("确定要删除吗?")) {
                    this.axios.post("http://localhost:8081/role/delBeach", {ids: [row.id]}).then(resp => {
                        if (resp.data.result) {
                            this.$message("删除成功");
                            this.list();
                            this.ids = {};
                        } else {
                            this.$message("删除失败");
                        }
                    })
                }
            },
            /*去修改页面*/
            toUpdate(row) {
                //打开对话框
                this.dialogFormVisible = true;
                console.log(row.id);
                this.axios.get("http://localhost:8081/role/getRoleById?id=" + row.id).then(res => {
                    console.log("111111" + res);
                    this.form = res.data.data;
                })
            },
            toSetMenu(row) {
                this.dialogTableVisible = true;
                this.menuRole.rid=row.id;
                /*查询所有菜单*/
                this.axios.get("http://localhost:8081/menu/selectAll").then(res=>{
                    console.log(res)
                    this.treeData=res.data.data;
                })
                /*通过角色id回显菜单*/
                this.axios.get("http://localhost:8081/menu-role/selectById",{params:{"rid":row.id}}).then(res=>{
                    this.$refs.tree.setCheckedKeys([]);//清除选中的
                    console.log(res.data.data)
                    this.Nodes=res.data.data;//选中
                })
            },
            setMenu(){
                //设置权限(菜单)
                console.log("获取半选中的节点"+this.$refs.tree.getHalfCheckedKeys())
                console.log("获取选中的子节点"+this.$refs.tree.getCheckedKeys())
                //未全选包含父节点的数据,包含父节点的数据
                console.log(this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys())+"^^^^^^^^^^^^")
                //往 数组里加上选中的节点id
                this.Nodes=this.$refs.tree.getCheckedKeys()
                this.dialogTableVisible=false
                /*获取到所有的节点*/
                this.menuRole.mids=this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys())


                this.axios.post("http://localhost:8081/menu-role/saveMenuRole",this.menuRole).then(resp=>{
                        console.log(resp);
                        if(resp.data.result){
                        this.$message("修改菜单成功");
                        this.list();
                    }else{
                        this.$message("修改菜单失败");
                    }
                })

            }


        },
        created() {
            this.list();
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>